<html>

<head>
    <title>Socket Test</title>
    <link rel="stylesheet" href="/theme.css" />
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
</head>

<body>
    <!-- <h1>Socket Test</h1> -->
    <input class="chat-type" placeholder="Socket Test" type="text" onchange="onType(event)" />

    <script>
        // browser
        const log = console.log;

        function onType(e) {
            if (!socket) return;
            var msg = e.target.value;
            socket.emit('echo', msg);
        }

        var userId = `client_${Math.random().toFixed(5).substr(2)}`;
        var it = document.createElement('ul');
        it.className = "messages";

        document.body.appendChild(it)

        function addMessage(type, msg) {
            var li = document.createElement('li');
            li.innerHTML = "<i>" + msg.text + "</i>" + "<b>" + msg.userId + "</b>";
            li.className = type + " " + (msg.type || "");
            if (userId == msg.userId) {
                li.className += " self";
            }
            if ((msg.text == "connected!" || msg.text == "disconnected!") && msg.rooms) {
                var rooms = Object.keys(msg.rooms).length;
                var s = [];
                for (var i in msg.rooms) {
                    s.push("<b>Room:" + i + " Numbers:" + msg.rooms[i].length + "</b>")
                }
                li.innerHTML += "<div>" + s.join("<br>") + "</div>";
            }
            it.appendChild(li);
        }


        window.onload = function() {

            // init
            var room = 'tent-lodge';
            var namespace = '/';
            // namespace = '/example';
            // namespace = "http://127.0.0.1:7001/";

            // var socket = io();
            var socket = io(namespace);
            // const socket = io(namespace, {
            //   // Actual use can pass parameters here
            //   query: {
            //     room,
            //     userId,
            //   },
            //   transports: ['websocket']
            // });

            socket.on('connect', () => {
                const id = socket.id;

                log('#connect,', id, socket); // receive online user information

                var msg = 'Hello Socket.io!';
                socket.emit('echo', msg);

                // listen for its own id to implement p2p communication
                socket.on(id, msg => {
                    log('#receive,', msg);
                });
            });

            socket.on('echo', msg => {
                log('echo from server:', msg);
            });

            socket.on('hello', msg => {
                log('#hello,', msg);
            });

            // system events
            socket.on('disconnect', msg => {
                log('#disconnect', msg);
            });

            socket.on('disconnecting', () => {
                log('#disconnecting');
            });

            socket.on('error', (res) => {
                log('#error', res);
            });

            window.socket = socket;
        };
    </script>

</body>

</html>